<template>
  <div class="zhu">
    <header class="tb">
      <div class="td-div">
        <router-link exact to="/Cart" active-class="active" tag="li">
          <van-icon name="arrow-left" class="fanhuijiantou" />
          <span>确认订单页</span>
        </router-link>
      </div>
    </header>
    <div class="quren-neirong">
      <section class="nr-dizhi">
        <van-cell is-link @click="showPopup">请添加收货地址</van-cell>
        <van-popup v-model="show" position="top" closeable :style="{ height: '100%' }">
          <van-address-edit
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
          />
        </van-popup>
      </section>
      <div class="nr-xinxi">
        <div>
          <div class="nr-tu" v-for="item in payList" :key="item.cid">
            <div class="nr-tu1">
              <!-- src="https://kaola-pop.oss.kaolacdn.com/4e0aec2ee69d450fb097342a0ee21a55_0_0.null?x-oss-process=image/resize,w_200,h_200/quality,q_95/format,webp" -->
              <img :src="item.image" alt />
            </div>
            <div class="nr-tu2">
              <!-- <div class="nr-tu2a">【6+64GB 1169起】华为 荣耀20青春版 AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 全网通手机</div> -->
              <div class="nr-tu2a">{{ item.title }}</div>
              <div class="nr-tu2b">
                <!-- <span class="pan1">颜色:幻夜黑 内存容量:4+64GB</span> -->
                <span class="pan1">{{ }}</span>
                <span class="pan2">x {{ item.num }}</span>
              </div>
              <div class="nr-tu2c">￥ {{ item.price }}</div>
              <div class="nr-tu2d">
                <span>7天无理由退货</span>
              </div>
            </div>
          </div>
          <div class="nr-zi1">考拉入驻商家发货，付款后，48小时内发货</div>
          <div class="nr-zi1">
            卖家赠送运费险，退货可赔付运费
            <van-icon class="xiaolian" name="smile-o" />
          </div>
          <div class="nr-zi1">考拉入驻商家发货，付款后，48小时内发货</div>
          <div class="nr-fapiao">
            <div>
              <div class="fapiao1">发票</div>
              <div class="fapiao2">
                暂不需要
                <van-icon name="arrow" class="youjiantou" />
              </div>
            </div>
          </div>
          <div class="nr-fapiao">
            <div>
              <div class="fapiao1">分期</div>
            </div>
          </div>
          <div class="nr-fapiao">
            <div>
              <div class="fapiao1">
                <p class="zhifujin">支付￥ {{ cartTotal.toFixed(2) }}</p>
              </div>
            </div>
          </div>
          <van-button type="info" class="tijianann" @click="dian()">提交订单</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button, Toast, Popup } from "vant";
Vue.use(Icon);
Vue.use(Button);
Vue.use(Toast);
Vue.use(Popup);

export default {
  data() {
    return {
      checked: true,
      show: false,
      areaList: {},
      searchResult: [],
      payList: [],
    };
  },
  computed: {
    cartTotal() {
      return this.$store.getters["cart/cartTotal"];
    },
  },
  created() {
    this.$bus.$emit("FooterBar", false);
  },
  mounted() {
    this.payList = JSON.parse(localStorage.getItem("cart"));
    // console.log(123, this.payList);
  },
  methods: {
    dian() {
      Toast.loading({
        message: `余额不足...`,
        forbidClick: true,
      });
    },
    showPopup() {
      this.show = true;
    },
    onSave() {
      Toast("save");
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.zhu {
  background-color: #f0f0f0;
  height: 736px;
}
.td {
  display: flex;
  height: 45px;
  width: 100%;
}
.td-div {
  display: block;
  line-height: 45px;
  height: 45px;
  width: 100%;
  text-align: center;
  background-color: #fff;
  overflow: hidden;
  span {
    max-width: 52%;
    font-size: 18px;
  }
}
.quren-neirong {
  padding-bottom: 100px;
}
.quren-neirong {
  margin-top: 10px;
  margin-bottom: 10px;
  section {
    position: relative;
    margin: 0 10px;
  }
}
.nr-xinxi {
  margin: 0 10px;
  border-radius: 4px;
  overflow: hidden;
  div {
    .nr-tu {
      display: flex;
      padding: 12px;
      .nr-tu1 {
        position: relative;
        width: 90px;
        height: 90px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }
      }
      .nr-tu2 {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: justify;
        justify-content: space-between;
        padding: 3px 0 3px 10px;
        max-width: calc(100% - 90px);
        background-color: #fff;
        .nr-tu2a {
          font-family: PingFangSC-Semibold;
          font-size: 12px;
          color: #333;
          line-height: 20px;
          // 文本省略加冒号
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .nr-tu2b {
          justify-content: space-between;
          line-height: 16px;
          display: flex;
          -webkit-box-pack: justify;
          span {
            font-size: 12px;
            color: #999;
          }
          .pan2 {
            -webkit-box-flex: 0;
            -webkit-flex: none;
            -ms-flex: none;
            flex: none;
            white-space: nowrap;
            margin-right: 5px;
          }
        }
        .nr-tu2c {
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          font-family: PingFangSC-Semibold;
          font-size: 15px;
          color: #333;
          line-height: 21px;
        }
        .nr-tu2d {
          display: flex;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
          line-height: 14px;
          min-height: 20px;
          box-sizing: border-box;
          span {
            background: #fff2f0;
            color: red;
            font-size: 12px;
          }
        }
      }
    }
  }
}
.nr-zi1 {
  width: 350px;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  background-color: #f9f9f9;
  color: #333;
  justify-content: flex-start;
  -webkit-box-align: center;
  display: flex;
  -webkit-box-pack: start;
  font-size: 12px;
  margin-left: 10px;
}
.xiaolian {
  position: relative;
  left: 160px;
  top: 4px;
  font-size: 15px;
}
.nr-fapiao {
  margin: 0 10px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
  div {
    align-items: center;
    height: 45px;
    font-size: 14px;
    color: #333;
    padding: 0 12px;
    background: #fff;
    display: flex;
    -webkit-box-pack: justify;
    .fapiao2 {
      position: relative;
      padding-right: 10px;
      left: 220px;
      font-size: 12px;
    }
  }
}
.zhifujin {
  color: red;
  font-size: 20px;
}
.tijianann {
  width: 390px;
  border-radius: 20px;
  // margin-top: 180px;
  position: fixed;
  bottom: 0;
  left: 0;
}
.fanhuijiantou {
  position: relative;
  right: 150px;
}
</style>
